<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:facelets="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.prime.com.tr/ui"
	xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
	<link rel="stylesheet" href="/Poseidon/css/myStyle.css" type="text/css"
		media="all" />

</h:head>
<h:body>
	<h:form id="form">
		<p:growl id="growl" />
		<p:layoutUnit position="north" size="400" resizable="true"
			closable="true" collapsible="true">

			<p:layout style="min-width:400px;min-height:200px;" id="layout">

				<p:layoutUnit position="west" resizable="true" size="210"
					minSize="40" maxSize="210">
					<ui:include src="/pages/menu.xhtml" />

				</p:layoutUnit>

				<p:layoutUnit position="center">

					<h:panelGrid columns="1" cellpadding="3"
						style="width:40%;margin-left:25%;">
						<h:graphicImage url="/images/headers/agregar_tarea.png" />

						<p:panel id="panel">
							<h:panelGrid columns="4" cellpadding="5">
								<h:outputLabel for="firstname" value="Nombre: *" />
								<p:inputText id="firstname"
									requiredMessage="Este campo es obligatorio"
									value="#{tasksTableBean.myTask.name}" required="true"
									label="Firstname">
								</p:inputText>
								<p:watermark for="firstname" value="Ingrese un nombre" />
								<p:message for="firstname" />

								<h:outputLabel for="description" value="Descripcion *" />
								<p:inputTextarea id="description"
									requiredMessage="Este campo es obligatorio"
									value="#{tasksTableBean.myTask.description}" required="true"
									label="description" />
								<p:watermark for="description" value="Ingrese una descripcion" />
								<p:message for="description" />

								<h:outputLabel for="progress" value="Avance: *" />

								<h:panelGrid columns="1" style="margin-bottom:10px">
									<h:panelGroup>
										<h:outputText value="%" />
										<h:outputText id="output"
											value="#{tasksTableBean.myTask.progress}" />
									</h:panelGroup>

									<h:inputHidden id="progress"
										value="#{tasksTableBean.myTask.progress}" />
									<p:slider step="25" for="progress" display="output"
										style="width:150px" />
								</h:panelGrid>
								<p:message for="progress" />
								<h:inputHidden></h:inputHidden>

								<h:outputLabel for="startDate" value="Inicio: *" />
								<p:calendar id="startDate" binding="#{startDate}" 
									value="#{tasksTableBean.myTask.startDate}" pattern="dd/MM/yyyy" />

								<p:graphicImage value="/images/info.png" width="20px"
									onclick="document.getElementById('form:info').click()" />

								<p:message for="startDate" />

								<h:outputLabel for="finishDate" value="Fin *" />
								<p:calendar id="finishDate"
									value="#{tasksTableBean.myTask.finishDate}"
									pattern="dd/MM/yyyy">
									<f:validator validatorId="taskDateValidator" />
									<f:attribute name="startDate" value="#{startDate}" />
									<f:attribute name="selectOneMenuActivities"
										value="#{selectOneMenu}" />
									<f:attribute name="activityList"
										value="#{tasksTableBean.allActivities}" />
								</p:calendar>
								<p:watermark value="Seleccione una fecha final" for="finishDate" />
								<p:message for="finishDate" />

								<h:outputLabel for="select" value="Responsable : *" />
								<p:selectOneMenu value="#{tasksTableBean.myTask.employee}"
									style="width:170px" converter="employeeConverter" id="select"
									effect="fade" var="p">
									<f:selectItem itemLabel="Seleccione el empleado" itemValue="" />
									<f:selectItems id="employee"
										value="#{tasksTableBean.employees}" var="employee"
										itemLabel="#{employee.firstname}" itemValue="#{employee}" />
									<p:column>
										<p:graphicImage value="/#{p.image}" width="40" height="60" />
									</p:column>

									<p:column>  
			         			       #{p.firstname}   
			            			</p:column>
								</p:selectOneMenu>

								<h:inputHidden></h:inputHidden>
								<h:inputHidden></h:inputHidden>


								<h:outputLabel for="activity" value="Actividad *" />
								<p:selectOneMenu value="#{tasksTableBean.myTask.activity}"
									binding="#{selectOneMenu}" style="width:170px"
									converter="activityConverter" id="activitySelect" effect="fade"
									var="a">
									<f:selectItem itemLabel="Seleccione la actividad" itemValue="" />
									<f:selectItems id="activity"
										value="#{tasksTableBean.allActivities}" var="activity"
										binding="#{activity}" itemLabel="#{activity.name}"
										itemValue="#{activity}">
									</f:selectItems>
									<p:column>  
         			      				 #{a.name}   
            						</p:column>
								</p:selectOneMenu>

							</h:panelGrid>


							<p:commandButton value="Guardar" ajax="false"
								actionListener="#{tasksTableBean.save}"
								action="dashboard?faces-redirect=true" />
							<p:commandButton value="Volver" ajax="false"
								action="dashboard?faces-redirect=true" immediate="true" />
						</p:panel>
					</h:panelGrid>
					<p:commandButton ajax="true" style="visibility:hidden;" id="info"
						image="/images/info.png"
						actionListener="#{tasksTableBean.finishDateAsString}"
						immediate="true" update=":form:growl">
						<f:attribute name="selectOneMenuActivities"
							value="#{selectOneMenu}" />
					</p:commandButton>

				</p:layoutUnit>
			</p:layout>
		</p:layoutUnit>


	</h:form>

</h:body>
</html>